<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>对账管理 -- 总账查询</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script src="${contextPath}/static/util/dateutils.js"></script>
    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <form class="form-inline" style="margin:5px 0;">
    	<input id="uname" type="hidden" value="${username}">
        <shiro:hasPermission name="CHECKING:TBCOCOMPF">
            <shiro:hasPermission name="CHECKING:BANK">
                <div class="form-group">
                    <select class="form-control" id="tbcocompNameInput" style="width: 150px">
                        <option value="">—烟草公司名称—</option>
                        <option v-for="tbcocompName in tbcocompNames">{{tbcocompName}}</option>
                    </select>
                </div>
            </shiro:hasPermission>
        </shiro:hasPermission>
        <shiro:hasPermission name="CHECKING:TBCOCOMPF">
            <div class="form-group">
                <select class="form-control" id="bankNameInput" style="width: 150px">
                    <option value="">—收单行名称—</option>
                    <option v-for="bankName in bankNames">{{bankName}}</option>
                </select>
            </div>
        </shiro:hasPermission>
        <shiro:hasPermission name="CHECKING:BANK">
            <div class="form-group">
                <select class="form-control" id="merNameInput" style="width: 150px">
                    <option value="">—商户号名称—</option>
                    <option v-for="merName in merNames">{{merName}}</option>
                </select>
            </div>
        </shiro:hasPermission>
        <shiro:hasPermission name="CHECKING:TBCOCOMPF">
            <div class="form-group">
                <select class="form-control" style="width: 150px" id="payTypeSelect">
                    <option value="">—交易类型—</option>
                    <option value="0">支付</option>
                    <option value="1">退货</option>
                </select>
            </div>
        </shiro:hasPermission>
        <div class="form-group">
            <input type="text" class="form-control" id="settleDateInput" placeholder="清算日期">
        </div>
        <div class="form-group">
        	
	        <button type="button" class="btn btn-success" onclick="queryOrder();">查询</button>
	        <button onclick="doPrints();" type="button" class="btn btn-default">打印</button>
	        <button type="button" title="根据查询条件导出所有记录" onclick="exportExcel();" class="btn btn-info">导出Excel</button>
	        <button class="btn btn-info" onclick="javascript:window.opener=null;window.open('','_self');window.close();">关闭</button>
        </div>
    </form>
    <div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">总账查询</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">
           <%-- <img style="height: 20px;margin-top: 9px;"
                 src="">--%>
        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="font-size: 18px;">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>
                <shiro:hasPermission name="CHECKING:TBCOCOMPF">
                   <%-- <th>烟草公司标识</th>--%>
                    <th>烟草公司名称</th>
                </shiro:hasPermission>
                <%--<th>收单行代码</th>--%>
                <th>收单行名称</th>
                <th>商户号</th>
                <shiro:hasPermission name="CHECKING:BANK">
                    <th>商户号名称</th>
                </shiro:hasPermission>
                <th>清算日期</th>
                <shiro:hasPermission name="CHECKING:TBCOCOMPF">
                    <th>交易类型</th>
                </shiro:hasPermission>
                <th>支付金额</th>
                <shiro:hasPermission name="CHECKING:TBCOCOMPF">
                    <th>烟草结算金额</th>
                </shiro:hasPermission>
                <th>支付笔数</th>
                <shiro:hasPermission name="CHECKING:BANK">
                    <th>银行结算金额</th>
                    <th>手续费</th>
                    <th>品牌服务费</th>
                    <th>转接清算费</th>
                </shiro:hasPermission>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="(order,index) in orderList">
                <shiro:hasPermission name="CHECKING:TBCOCOMPF">
                    <%--<td>{{order.tbcocompId}}</td>--%>
                    <td>{{order.tbcocompName}}</td>
                </shiro:hasPermission>
                <%--<td>{{order.bankCode}}</td>--%>
                <td>{{order.bankName}}</td>
                <td>{{order.merId}}</td>
                <shiro:hasPermission name="CHECKING:BANK">
                    <td>{{order.merName}}</td>
                </shiro:hasPermission>
                <td>{{order.settleDate}}</td>
                <shiro:hasPermission name="CHECKING:TBCOCOMPF">
                    <td>{{order.payTypeName}}</td>
                </shiro:hasPermission>
                <td>{{order.payAmt}}</td>
                <shiro:hasPermission name="CHECKING:TBCOCOMPF">
                    <td>{{order.tbcocompFinalAmt}}</td>
                </shiro:hasPermission>
                <td>{{order.payNum}}</td>
                <shiro:hasPermission name="CHECKING:BANK">
                    <td>{{order.bankFinalAmt}}</td>
                    <td>{{order.factorage}}</td>
                    <td>{{order.servicePrice}}</td>
                    <td>{{order.adapterAmt}}</td>
                </shiro:hasPermission>
                <td>
                    <button v-on:click="goToDetail(index)">明细</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right;margin-top: 10px;" id="pageDiv"></div>
</div>

<form action="${contextPath}/checking/checkingDetailPage" method="post" target="_blank" id="goToDetailPage" style="display:none">
    <textarea type="hidden" id="goToDetailPageData" name="rowData"></textarea>
</form>
<form action="${contextPath}/checking/exportExcel" method="post" id="exportExcel" style="display:none" >
    <input type="hidden"  name="tbcocompName" id="exportExcelParamTbcocompName">
    <input type="hidden"  name="bankName" id="exportExcelParamBankName">
    <input type="hidden"  name="merName" id="exportExcelParamMerName">
    <input type="hidden"  name="settleDate" id="exportExcelParamSettleDate">
    <input type="hidden"  name="payType" id="exportExcelParamPayType">
    <input type="hidden"  name="tableType" value="general">
</form>
</body>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    /*v-model="queryModel.tbcocompName"
    queryModel可以放在vue里面，做到双向数据绑定，mvc模式*/
    var queryModel = {
        page: 1,
        tbcocompName: "",
        bankName: "",
        merName: "",
        settleDate: "",
        payType: ""
    }

    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            tbcocompNames: [],
            bankNames: [],
            merNames: []
        },
        methods: {
            goToDetail: function (index) {
                var order = this.orderList[index]
                //window.location.href='${contextPath}/checking/checkingDetailPage?rowData='+JSON.stringify(order)
                $("#goToDetailPageData").val(JSON.stringify(order))
                $("#goToDetailPage").submit()
            }
        }
    })

    var getOrder = function (queryModel) {
        layer.load(1)
        $.ajax({
            url: '${contextPath}/checking/getGeneralLedgerByPageQuery', //localhost:8080
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false) {
                    layer.msg("获取出错：" + data.message)
                    return
                }
                //console.log(data)
                var dataArray = data.recordList;
                if (dataArray.length == 0) {
                    layer.msg("查询没有数据")
                }
                app.orderList = dataArray
                laypage({
                    cont: 'pageDiv'
                    , pages: data.pageCount //总页数
                    , groups: 5 //连续显示分页数
                    , curr: data.currentPage
                    , skin: '#1E9FFF',
                    jump: function (obj, first) {
                        var curr = obj.curr;
                        if (!first) {
                            queryModel.page = curr
                            getOrder(queryModel)
                        }
                    }
                });


                //console.log(data.data)
            },
            error: function (error) {
                layer.closeAll('loading');
                //console.log(error)
            }
        })
    }
    //getOrder(queryModel)

    var queryOrder = function () {
        queryModel.page = 1
        queryModel.tbcocompName = $("#tbcocompNameInput").val()
        queryModel.bankName = $("#bankNameInput").val()
        queryModel.merName = $("#merNameInput").val()
        queryModel.settleDate = $("#settleDateInput").val()
        queryModel.payType = $("#payTypeSelect").val()
        getOrder(queryModel)
    }


    $.ajax({
        url: '${contextPath}/checking/getTbcocompNamesAndBankNamesAndMerNames', //
        type: 'post',
        data: queryModel,
        success: function (data) {
            if (data.success == false) {
                layer.msg("获取查询条件出错，请刷新页面")
                return
            }
            //console.log(data)
            var dataObj = data.data;
            app.tbcocompNames = dataObj.tbcocompNames
            app.bankNames = dataObj.bankNames
            app.merNames = dataObj.merNames
        },
        error: function (error) {
            //console.log(error)
            layer.msg("获取查询条件出错，请刷新页面")
        }
    })

    $('#settleDateInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyymmdd",
        //startDate:new Date(),
    });

    var exportExcel = function () {
        $("#exportExcelParamTbcocompName").val(queryModel.tbcocompName)
        $("#exportExcelParamBankName").val(queryModel.bankName)
        $("#exportExcelParamMerName").val(queryModel.merName)
        $("#exportExcelParamSettleDate").val(queryModel.settleDate)
        $("#exportExcelParamPayType").val(queryModel.payType)

        $("#exportExcel").submit();
    }
    var doPrints = function(){
    	var fillTable = new FillTable(),oDateUtil = new DateUtil();
    	var formatDate = oDateUtil.formatDate(new Date(),"yyyy年MM月dd日",false);
    	layer.msg("正在打印报表...");
    	queryModel.pageSize = 10000;
    	var css = {"csTb":{"clz":"bootstrap-table","css":""},"csTr":{"clz":"","css":""},"csTh":{"clz":"","css":""},"csTd":{"clz":"","css":""}}
    	$.ajax({
        	url: '${contextPath}/checking/getGeneralLedgerByPageQuery', //localhost:8080
            type: 'post',
            data: queryModel,
            success: function (data) {
            	if(data["recordList"].length == 0){
            		layer.msg("暂无数据!");
            		return;
            	}
            	var cols = [{"field":"bankCode","title":"收单行代码"},{"field":"bankName","title":"收单行名称"},{"field":"merId","title":"商户号"},{"field":"merName","title":"商户名称"},{"field":"tbcocompId","title":"清分商户账号"},{"field":"tbcocompName","title":"清分商户用户名"},{"field":"settleDate","title":"清算日期"},{"field":"payAmt","title":"支付金额"},{"field":"payNum","title":"支付笔数"},
            	            {"field":"bankFinalAmt","title":"银行结算金额"},{"field":"factorage","title":"手续费"},{"field":"servicePrice","title":"品牌服务费"},{"field":"adapterAmt","title":"转接清算费"},]
            	var cp = {"tpl":1,"cnt":[{"title":"深圳市烟草公司"+data["recordList"][0]["bankName"]+"收单清分报表","clz":"title","css":""},{"title":"登陆用户名:"+$("#uname").val(),"clz":"tr","css":"margin-top:5px;"},{"title":"打印日期："+formatDate,"clz":"tr","css":"margin-top:5px;"}]}
    			fillTable.ft(cols,data.recordList,css,cp);
    			$("head").html("").append('<link rel="stylesheet" href="${contextPath}/static/common/table.css">');
    			setTimeout(function(){
    				$("body").css("background","none").html(fillTable.tb)
    				layer.closeAll();
        			window.print();
        			window.location.reload(); //刷新当前页面
    			},500)
    			
       		}
    	})
    }
</script>
</html>





